<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .content{
            font-size: 60px;
        }
        ul li{
             list-style: none;
             padding: 10px 20px;
             float: left;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script>
       $(function(){
           var wjx_none = "☆";   //空心五角星
           var wjx_sel = "★";    //实心五角星

           //给所有的li元素设置鼠标移入事件
           $(".content").on("mouseenter","li",function(){

               //prevAll()作用：获取指定元素之前的所有元素
               //end()作用：结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。即返回上一次操作的位置
               //nextAll()作用：获取指定元素之后的所有元素
               $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
           });

           //给所有的li元素添加单击事件
           $(".content").on("click","li",function () {
               //先清除所有li元素的类
               $("li").removeClass("clicked");
               //再给当前li元素添加类
               $(this).addClass("clicked");
           })

           //给ul绑定鼠标移出事件
           $(".content").on("mouseleave",function(){
               //先给所有的li设置空心五角星
               $(".content >li").text(wjx_none);
               //找到具有clicked类的li,之前的设置为实心，后面的设置为空心
               $(".clicked").text(wjx_sel).prevAll("li").text(wjx_sel);
           })
       })
    </script>
</head>
<body>
<ul class="content">
    <li>★</li>
    <li>★</li>
    <li>★</li>
    <li>★</li>
    <li>★</li>
    <li>★</li>
</ul>
</body>
</html>